<template>
  <div class="h-100">
    <index-header />
    <div v-if="isMain" class="h-87">
      <!-- 高 607px -->
      <div class="flex justify-between" style="height:48.29%">
        <div data-bottom class="second-sides">
          <page-header text="农产品生产指标" :ph="330">
            <v-chart :options="optionNCPSCZB" />
          </page-header>
        </div>
        <div v-if="xrflag" data-bottom class="second-sides">
          <page-header text="有效灌溉面积及除涝治水情况" :ph="330">
            <div class="h-100 flex flex-center" style="padding:20px 0 0 0;">
              <div class="flex justify-between" style="width:82%;height:90%;flex-direction: column;">
                <div>
                  <div class="c-f f-14">农用化肥施用折纯量</div>
                  <div class="number-box">
                    <span class="t-big-number">{{ optionYXGGMJ.nyhfsyzcl.value ? optionYXGGMJ.nyhfsyzcl.value : '暂无数据' }}</span>
                    <span class="f-14 small-number">万吨</span>
                  </div>
                </div>
                <div class="flex justify-between">
                  <div data-33>
                    <div class="c-f f-14">节水灌溉面积</div>
                    <div class="number-box">
                      <span class="t-big-number">{{ optionYXGGMJ.jsggmj.value ? optionYXGGMJ.jsggmj.value : '暂无数据' }}</span>
                      <span class="small-number">千公顷</span>
                    </div>
                  </div>
                  <div data-33>
                    <div class="c-f f-14">除涝面积</div>
                    <div class="number-box">
                      <span class="t-big-number">{{ optionYXGGMJ.clmj.value ? optionYXGGMJ.clmj.value : '暂无数据' }}</span>
                      <span class="small-number">千公顷</span>
                    </div>
                  </div>
                </div>
                <div class="flex justify-between">
                  <div data-33>
                    <div class="c-f f-14">水土流失治理面积</div>
                    <div class="number-box">
                      <span class="t-big-number">{{ optionYXGGMJ.stlszlmj.value ? optionYXGGMJ.stlszlmj.value : '暂无数据' }}</span>
                      <span class="small-number">千公顷</span>
                    </div>
                  </div>
                  <div data-33>
                    <div class="c-f f-14">灌区有效灌溉面积</div>
                    <div class="number-box">
                      <span class="t-big-number">{{ optionYXGGMJ.gqyxggmj.value ? optionYXGGMJ.gqyxggmj.value : '暂无数据' }}</span>
                      <span class="small-number">千公顷</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </page-header>
        </div>
        <div data-bottom class="second-sides">
          <page-header text="金融流量指标" :ph="330">
            <v-chart :options="optionJRLLZB" />
          </page-header>
        </div>
      </div>
      <!-- 高 20px -->
      <div style="height:2.4%" />
      <!-- 高 607px -->
      <div class="flex justify-between" style="height:48.29%">
        <div data-bottom class="second-sides">
          <page-header text="经济效率与发展指标" :ph="330">
            <v-chart :options="optionJJXLYFZZB" />
          </page-header>
        </div>
        <div data-bottom class="second-sides">
          <page-header text="社会效益指标" :ph="330">
            <v-chart :options="optionSHXYZB" />
          </page-header>
        </div>
        <div data-bottom class="second-sides">
          <page-header text="农产品加工指标" :ph="330">
            <v-chart :options="optionNCPJGNLZCSP" />
          </page-header>
        </div>
      </div>
    </div>
    <router-view v-else class="h-87" />
  </div>
</template>

<script>
import echarts from 'echarts'
import PageHeader from 'header/PageHeader.vue'
import YlCharts from '@/components/Charts/ylCharts.vue'
import { getTowSideStatAndRadar, getTowSideStat, validWaterArea } from '@/api/connector'
import IndexHeader from 'header/IndexHeader2.vue'
export default {
  name: 'ProductivityLevel',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    YlCharts,
    IndexHeader,
    PageHeader
  },
  data() {
    return {
      menuLevel: 1,
      xrflag: false,
      testObj: {},
      demoData: [
        { name: '', value: '', unit: '%', pos: ['16.6%', '25%'], colora: '#1db0d2', colorb: '#44ceef' },
        { name: '', value: '', unit: '%', pos: ['49.8%', '25%'], range: [0, 100], colora: '#e6658f', colorb: '#f8a58b' },
        { name: '', value: '', unit: '%', pos: ['83.6%', '25%'], range: [0, 100], colora: '#1ea899', colorb: '#29c582' },
        { name: '', value: '', unit: '%', pos: ['16.6%', '75%'], range: [0, 100], colora: '#c188f4', colorb: '#f2a6c8' },
        { name: '', value: '', unit: '%', pos: ['49.8%', '75%'], range: [0, 100], colora: '#1db0d2', colorb: '#f2a6c8' },
        { name: '', value: '', unit: '%', pos: ['83.6%', '75%'], range: [0, 100], colora: '#e6658f', colorb: '#f2a6c8' }
      ],
      optionNCPSCZB: {
        normal: {
          top: 200,
          left: 300,
          width: 500,
          height: 400,
          zIndex: 6,
          backgroundColor: ''
        },
        color: ['rgba(245, 166, 35, 1)', 'rgba(19, 173, 255, 1)'],
        tooltip: {
          show: true,
          trigger: 'item'
          // formatter:function( params ){
          //   console.log(params)
          //   var  result = params[0].name+'<br>';
          //   params.forEach(function (item) {
          //       result+=item.seriesName+' : '+item.value+' %</br>'
          //   });
          //   return  result;
          // }
        },
        legend: {
          show: true,
          icon: 'circle',
          left: 'center',
          top: '0%',
          orient: 'horizontal',
          textStyle: {
            fontSize: 14,
            color: '#fff'
          },
          data: []
        },
        radar: {
          center: ['50%', '50%'],
          radius: '60%',
          startAngle: 90,
          splitNumber: 4,
          shape: 'circle',
          splitArea: {
            areaStyle: {
              color: ['transparent']
            }
          },
          axisLabel: {
            show: false,
            fontSize: 18,
            padding: [0, 0, 4, 0],
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white' //
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'white' //
            }
          },
          name: {
            // 指示器文字换行 start
            formatter: function(text) {
              var strlength = text.length
              if (strlength % 9 != 0) {
                text = text.replace(/\S{9}/g, function(match) {
                  console.log(match)
                  return match + '\n\n'
                })
              } else {
                text = text.replace(/\S{9}/g, function(match) {
                  console.log(match)
                  return match + '\n\n'
                })
                strlength = text.length
                text = text.substring(0, strlength - 1)
              }
              return text
            }
            // 指示器文字换行 end
          },
          indicator: []
        },
        series: [
          {
            name: '',
            type: 'radar',
            // symbol: 'circle',
            // symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(19, 173, 255, 1)',
                borderColor: 'rgba(19, 173, 255, 0.4)',
                borderWidth: 10
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(19, 173, 255, 0.8)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(19, 173, 255, 1)',
                width: 2
                // type: 'line',
              }
            },
            data: []
          },
          {
            name: '',
            type: 'radar',
            // symbol: 'circle',
            // symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(127, 70, 179, 1)',
                borderColor: 'rgba(127, 70, 179, 0.8)',
                borderWidth: 10
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(127, 70, 179, 0.5)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(127, 70, 179, 1)',
                width: 2
                // type: 'line',
              }
            },
            data: []
          },
          {
            name: '',
            type: 'radar',
            // symbol: 'circle',
            // symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(48, 229, 202, 1)',
                borderColor: 'rgba(48, 229, 202, 0.4)',
                borderWidth: 10
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(48, 229, 202, 0.5)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(48, 229, 202, 1)',
                width: 2
                // type: 'line',
              }
            },
            data: []
          },
          {
            name: '',
            type: 'radar',
            // symbol: 'circle',
            // symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(16, 215, 133, 1)',
                borderColor: 'rgba(16, 215, 133, 0.4)',
                borderWidth: 10
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(16, 215, 133, 0.5)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(16, 215, 133, 1)',
                width: 2
                // type: 'line',
              }
            },
            data: []
          },
          {
            name: '',
            type: 'radar',
            // symbol: 'circle',
            // symbolSize: 10,
            areaStyle: {
              normal: {
                color: 'rgba(245, 166, 35, 0.4)'
              }
            },
            itemStyle: {
              color: 'rgba(245, 166, 35, 1)',
              borderColor: 'rgba(245, 166, 35, 0.3)',
              borderWidth: 10
            },
            lineStyle: {
              normal: {
                // type: 'line',
                color: 'rgba(245, 166, 35, 1)',
                width: 2
              }
            },
            data: []
          }
        ]

        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     // 坐标轴指示器，坐标轴触发有效
        //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        //   }
        // },
        // legend: {
        //   data: []
        // },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        // xAxis: {
        //   type: 'value',
        //   show: false
        // },
        // yAxis: {
        //   type: 'category',
        //   data: []
        // },
        // series: [
        //   {
        //     name: '直接访问',
        //     type: 'bar',
        //     stack: '总量',
        //     label: {
        //       show: true,
        //       align: 'left',
        //       position: 'insideRight'
        //     },
        //     itemStyle: {
        //       opacity: 0.6
        //     },
        //     data: [320]
        //   },
        //   {
        //     name: '邮件营销',
        //     type: 'bar',
        //     stack: '总量',
        //     itemStyle: {
        //       opacity: 0.6
        //     },
        //     label: {
        //       show: true,
        //       align: 'left',
        //       position: 'insideRight'
        //     },
        //     data: [120]
        //   },
        //   {
        //     name: '联盟广告',
        //     type: 'bar',
        //     stack: '总量',
        //     itemStyle: {
        //       opacity: 0.6
        //     },
        //     label: {
        //       show: true,
        //       align: 'left',
        //       position: 'insideRight'
        //     },
        //     data: [220]
        //   },
        //   {
        //     name: '视频广告',
        //     type: 'bar',
        //     stack: '总量',
        //     itemStyle: {
        //       opacity: 0.6
        //     },
        //     label: {
        //       show: true,
        //       align: 'left',
        //       position: 'insideRight'
        //     },
        //     data: [150]
        //   },
        //   {
        //     name: '搜索引擎',
        //     type: 'bar',
        //     stack: '总量',
        //     itemStyle: {
        //       opacity: 0.6
        //     },
        //     label: {
        //       show: true,
        //       align: 'left',
        //       position: 'insideRight'
        //     },
        //     data: [820]
        //   },
        //   {
        //     name: '搜索引擎',
        //     type: 'bar',
        //     stack: '总量',
        //     itemStyle: {
        //       opacity: 0.6
        //     },
        //     label: {
        //       show: true,
        //       align: 'left',
        //       position: 'insideRight'
        //     },
        //     data: [820]
        //   }
        // ]
      },
      optionJRLLZB: {
        title: {},
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.marker + item.seriesName + ' : ' + item.value + ' %</br>'
            })
            return result
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 坐标轴两边留白
          data: [],
          axisLabel: {
            lineHeight: 0,
            padding: [0, 0, 10, 0],
            // 坐标轴刻度标签的相关设置。
            interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
              color: '#ffffff',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12
            },
            formatter: function(params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = 4 // 一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
            // rotate:50,
          },
          axisTick: {
            // 坐标轴刻度相关设置。
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
              color: '#ffffff'
              // 	opacity:0.1
            }
          }
        },
        yAxis: [
          {
            name: ' %',
            type: 'value',
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#5C6D7C',
                opacity: 0.5
              }
            }
          }
        ],
        series: []
      },
      optionSHXYZB: {
        legend: {},
        tooltip: {},
        radar: [
          {
            radius: '60%',
            name: {
              // 指示器文字换行 start
              formatter: function(text) {
                var strlength = text.length
                if (strlength % 9 != 0) {
                  text = text.replace(/\S{9}/g, function(match) {
                    console.log(match)
                    return match + '\n\n'
                  })
                } else {
                  text = text.replace(/\S{9}/g, function(match) {
                    console.log(match)
                    return match + '\n\n'
                  })
                  strlength = text.length
                  text = text.substring(0, strlength - 1)
                }
                return text
              }
              // 指示器文字换行 end
            },
            indicator: [
              {
                name: '农村就业贡献'
              },
              {
                name: '农民人均存收入变化状况'
              },
              {
                name: '农业生产结构综合效益系数'
              },
              {
                name: '农业生产比较利益'
              }
            ],
            center: ['50%', '50%'], // 位置
            shape: 'circle', // 形状
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            splitArea: {
              areaStyle: {
                color: ['transparent']
              }
            },
            axisLabel: {
              show: false,
              fontSize: 18,
              color: '#fff',
              fontStyle: 'normal',
              fontWeight: 'normal'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white' //
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'white' //
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'radar',
            // symbol: 'circle',
            // symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(19, 173, 255, 1)',
                borderColor: 'rgba(19, 173, 255, 0.4)',
                borderWidth: 10
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(19, 173, 255, 0.8)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(19, 173, 255, 1)',
                width: 2
                // type: 'line',
              }
            },
            data: []
          },
          {
            name: '',
            type: 'radar',
            // symbol: 'circle',
            // symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(127, 70, 179, 1)',
                borderColor: 'rgba(127, 70, 179, 0.4)',
                borderWidth: 10
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(127, 70, 179, 0.8)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(127, 70, 179, 1)',
                width: 2
                // type: 'line',
              }
            },
            data: []
          },
          {
            name: '',
            type: 'radar',
            // symbol: 'circle',
            // symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(48, 229, 202, 1)',
                borderColor: 'rgba(48, 229, 202, 0.4)',
                borderWidth: 10
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(48, 229, 202, 0.5)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(48, 229, 202, 1)',
                width: 2
                // type: 'line',
              }
            },
            data: []
          },
          {
            name: '',
            type: 'radar',
            // symbol: 'circle',
            // symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(16, 215, 133, 1)',
                borderColor: 'rgba(16, 215, 133, 0.4)',
                borderWidth: 10
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(16, 215, 133, 0.5)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(16, 215, 133, 1)',
                width: 2
                // type: 'line',
              }
            },
            data: []
          },
          {
            name: '',
            type: 'radar',
            // symbol: 'circle',
            // symbolSize: 10,
            areaStyle: {
              normal: {
                color: 'rgba(245, 166, 35, 0.4)'
              }
            },
            itemStyle: {
              color: 'rgba(245, 166, 35, 1)',
              borderColor: 'rgba(245, 166, 35, 0.3)',
              borderWidth: 10
            },
            lineStyle: {
              normal: {
                // type: 'line',
                color: 'rgba(245, 166, 35, 1)',
                width: 2
              }
            },
            data: []
          }
        ]
      },
      optionNCPJGNLZCSP: {
        title: {},
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.marker + item.seriesName + ' : ' + item.value + ' %</br>'
            })
            return result
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 坐标轴两边留白
          data: [],
          axisLabel: {
            // 坐标轴刻度标签的相关设置。
            interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
            formatter: function(params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = 4 // 一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
            // rotate:50,
          },
          axisTick: {
            // 坐标轴刻度相关设置。
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
              color: '#E5E9ED'
              // 	opacity:0.1
            }
          }
        },
        yAxis: [
          {
            name: ' %',
            type: 'value',
            splitNumber: 5,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#E9F7FF',
                opacity: 0.5
              }
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        series: [
          {
            name: '',

            type: 'line',

            data: []
          },
          {
            name: '2019',
            type: 'line',

            data: []
          }
        ]
      },
      testOption: {
        series: []
      },
      optionJJXLYFZZB: {
        grid: {
          left: '20%',
          right: '10%',
          top: '10%',
          bottom: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            console.log(params)
            var result = params[0].name + '<br>'
            if (params[0].name == '单位耕地面积农业纯收入') {
              params.forEach(function(item) {
                result += item.marker+item.seriesName + ' : ' + item.value + ' 元</br>'
              })
              return result
            } else {
              params.forEach(function(item) {
                result += item.marker+item.seriesName + ' : ' + item.value + ' %</br>'
              })
              return result
            }
          }
        },
        legend: {
          show: true,
          // data:[],
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        xAxis: {
          type: 'value',
          // max: max,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            data: [],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // margin: 10,
              textStyle: {
                color: '#fff',
                fontSize: 14
              },
              formatter: function(params) {
                var newParamsName = '' // 最终拼接成的字符串
                var paramsNameNumber = params.length // 实际标签的个数
                var provideNumber = 6 // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              }
            }
          }
        ],
        series: [
          {
            // 内
            type: 'bar',
            barWidth: 20,
            name: '',
            label: {
              show: true,
              position: 'right',
              formatter: function(params) {
                if (params.name == '单位耕地面积农业纯收入') {
                  return params.value + '{a| 元}'
                } else {
                  return params.value + '{a| %}'
                }
              },
              textStyle: {
                color: '#fff',
                fontSize: 12,
                padding: [0, 20],
                rich: {
                  a: {
                    color: '#fff',
                    fontSize: 12
                  }
                }
              }
            },
            legendHoverLink: false,
            silent: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#0078FF' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#00DEFF' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              } // 底色
            },
            data: []
          },
          {
            // 内2
            type: 'bar',
            barWidth: 20,
            name: '',
            legendHoverLink: false,
            silent: true,
            label: {
              show: true,
              position: 'right',
              formatter: function(params) {
                if (params.name == '单位耕地面积农业纯收入') {
                  return params.value + '{a| 元}'
                } else {
                  return params.value + '{a| %}'
                }
              },
              textStyle: {
                color: '#fff',
                padding: [0, 20],
                fontSize: 12,
                rich: {
                  a: {
                    color: '#fff',
                    fontSize: 12
                  }
                }
              }
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#6236FF' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#AD88FD' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              } // 底色
            },
            data: []
          }
        ]
      },
      optionYXGGMJ: {}
    }
  },
  computed: {
    isMain() {
      return this.$route.name === 'industrial-decision-making'
    }
  },
  created() {
    if (this.isMain) this.init()
  },
  methods: {
    randomColorArr() {
      const arr = []
      for (let i = 0; i < 20; i++) {
        arr.push('hsb(' + Math.random() + ', 1, 1)')
      }
      return arr
    },
    settestdata() {
      var result = []
      this.demoData.forEach(function(item) {
        result.push(
          // 外围刻度
          {
            type: 'gauge',
            center: item.pos,
            radius: '30.33%', // 1行3个
            splitNumber: item.splitNum || 10,
            min: 0,
            max: 100,
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, 'rgba(0,0,0,0)']]
              }
            }, // 仪表盘轴线
            axisTick: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.6)',
                width: 1
              },
              length: -8
            }, // 刻度样式
            splitLine: {
              show: true,
              length: -20,
              lineStyle: {
                color: 'rgba(255,255,255,0.6)'
              }
            }, // 分隔线样式
            axisLabel: {
              show: false,
              distance: -20,
              textStyle: {
                color: '#03b7c9',
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            pointer: {
              show: 0
            },
            detail: {
              show: 0
            }
          },

          // 内侧指针、数值显示
          {
            name: item.name,
            type: 'gauge',
            center: item.pos,
            radius: '28%',
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: 100,
            axisLine: {
              show: true,
              lineStyle: {
                width: 6,
                color: [
                  [
                    item.value / item.countryValue,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: item.colora
                      },
                      {
                        offset: 1,
                        color: item.colorb
                      }
                    ])
                  ],
                  [1, '#222e7d']
                ]
              }
            },
            axisTick: {
              show: 0
            },
            splitLine: {
              show: 0
            },
            axisLabel: {
              show: 0
            },
            pointer: {
              show: false,
              length: '105%'
            },
            detail: {
              show: true,
              offsetCenter: [0, '15%'],
              textStyle: {
                fontSize: 14,
                color: '#fff'
              },
              formatter: [item.value, '{name|' + item.name + '}', '参考值：' + item.countryValue].join('\n'),
              rich: {
                name: {
                  fontSize: 14,
                  lineHeight: 30,
                  color: '#ddd'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#03b7c9'
              }
            },
            data: [
              {
                value: item.value
              }
            ]
          }
        )
      })
      this.testOption.series = result
      // return result
    },
    setoptionNCPSCZB(data) {
      this.optionNCPSCZB.legend.data = data.dateSet.slice(-2)
      for (var i = 0; i < data.typeInfoSet.length; i++) {
        if (data.typeInfoSet[i].name.indexOf('比重') != -1) {
          data.typeInfoSet[i].name += ' (%)'
        } else {
          data.typeInfoSet[i].name += ' (公斤)'
        }
      }
      this.optionNCPSCZB.radar.indicator = data.typeInfoSet
      // for(var i=0;i<data.typeSet.length;i++){
      //   var obj = {
      //     name:data.typeSet[i]
      //   }
      //   this.optionNCPSCZB.radar.indicator.push(obj)
      // }
      console.log(this.optionNCPSCZB.legend.data)
      for (const j in this.optionNCPSCZB.series) {
        this.optionNCPSCZB.series[j].name = this.optionNCPSCZB.legend.data[j]
        this.optionNCPSCZB.series[j].data = [data.dateValueListMap[this.optionNCPSCZB.legend.data[j]]]

        // const arr = []
        // for (const i in data) {
        //   arr.push(data[i][j])

        // }
      }
    },
    // setoptionJJXLYFZZB(data, typeSet) {
    //   this.optionJJXLYFZZB.legend.data = typeSet
    //   // for (const j in this.optionJJXLYFZZB.series) {
    //   //   const arr = []
    //   //   for (const i in data) {
    //   //     arr.push(data[i][j])
    //   //     this.optionJJXLYFZZB.series[j].data = arr
    //   //     this.optionJJXLYFZZB.series[j].name = typeSet[j]
    //   //   }
    //   // }
    // },
    setoptionSHXYZB(data) {
      // const colorArr = ['#4A99FF', '#4BFFFC', '#4F6271', 'red']
      this.optionSHXYZB.legend.data = data.dateSet.slice(-2)
      const indicator = []
      // this.optionSHXYZB.legend.data = data.typeSet
      for (const i in data.typeSet) {
        indicator.push({
          name: data.typeSet[i] + ' (%)',
          max: 100
        })
      }
      this.optionSHXYZB.radar[0].indicator = indicator
      for (const j in this.optionSHXYZB.series) {
        this.optionSHXYZB.series[j].name = this.optionSHXYZB.legend.data[j]
        this.optionSHXYZB.series[j].data = [data.dateValueListMap[this.optionSHXYZB.legend.data[j]]]
      }
      // this.optionSHXYZB.series[0].data[0].value = data[dateSet[dateSet.length - 1]]
      // this.optionSHXYZB.series[0].data[0].name = dateSet[dateSet.length - 1]
    },
    setoptionNCPJGNLZCSP(data, dateSet) {
      this.optionNCPJGNLZCSP.xAxis.data = dateSet
      this.optionNCPJGNLZCSP.series[0].name = '农产品加工能力支持水平'
      this.optionNCPJGNLZCSP.series[0].data = data['实际值']
    },
    setoptionNCPJGZHZCL(data) {
      this.optionNCPJGNLZCSP.series[1].name = '农产品加工综合支持率'
      this.optionNCPJGNLZCSP.series[1].data = data['实际值']
    },
    setoptionJRLLZB(data, dataSet, typeSet) {
      this.optionJRLLZB.xAxis.data = dataSet

      const seriesResult = []
      for (const i in typeSet) {
        seriesResult.push({
          name: typeSet[i],
          type: 'line',

          data: data[typeSet[i]]
        })
      }
      this.optionJRLLZB.series = seriesResult
    },
    init() {
      // this.settestdata()
      getTowSideStatAndRadar({
        groupCode: 'NCPSCZB',
        yearNum: '5'
      }).then((res) => {
        // this.optionNCPSCZB.yAxis.data = res.body.dateSet
        this.setoptionNCPSCZB(res.body)
      })

      getTowSideStat({
        groupCode: 'JJXLYFZZB',
        yearNum: '2'
      }).then((res) => {
        this.optionJJXLYFZZB.yAxis[0].data = res.body.typeSet
        // this.optionJJXLYFZZB.legend = res.body.dateSet
        this.optionJJXLYFZZB.series[0].name = res.body.dateSet[0]
        this.optionJJXLYFZZB.series[0].data = res.body.dateValueListMap[res.body.dateSet[0]]
        // this.optionJJXLYFZZB.series[1].name = res.body.typeSet[0]
        // this.optionJJXLYFZZB.series[1].data = res.body.dateValueListMap[res.body.dateSet[0]]
        this.optionJJXLYFZZB.series[1].name = res.body.dateSet[1]
        this.optionJJXLYFZZB.series[1].data = res.body.dateValueListMap[res.body.dateSet[1]]
        // this.optionJJXLYFZZB.series[3].name = res.body.typeSet[1]
        // this.optionJJXLYFZZB.series[3].data = res.body.dateValueListMap[res.body.dateSet[1]]
        // this.setoptionJJXLYFZZB(res.body.dateValueListMap, res.body.typeSet)
      })

      getTowSideStat({
        groupCode: 'JRLLZB'
      }).then((res) => {
        this.setoptionJRLLZB(res.body.typeValueListMap, res.body.dateSet, res.body.typeSet)
      })

      getTowSideStat({
        groupCode: 'SHXYZB'
      }).then((res) => {
        console.log(res)
        this.setoptionSHXYZB(res.body)
      })

      getTowSideStat({
        groupCode: 'NCPJGNLZCSP'
      }).then((res) => {
        this.setoptionNCPJGNLZCSP(res.body.typeValueListMap, res.body.dateSet, res.body.typeSe)
      })

      getTowSideStat({
        groupCode: 'NCPJGZHZCL'
      }).then((res) => {
        this.setoptionNCPJGZHZCL(res.body.typeValueListMap)
      })

      validWaterArea().then((res) => {
        if (res.header.retCode === '000000') {
          this.xrflag = true
          this.optionYXGGMJ = res.body
        }
      })
    }
  }
}
</script>
<style scoped>
div[data-bottom] {
  background: url(~@/assets/img/gradients-left.png) no-repeat;
  background-size: 100% 100% !important;
}
.second-center {
  width: 66.06%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.5%;
  height: 100%;
  background-size: 100% 100% !important;
}
.big-number {
  font-size: 44px;
  font-family: DIN;
  font-weight: bold;
  color: rgba(36, 246, 177, 1);
  line-height: 51px;
  background: linear-gradient(180deg, rgba(0, 255, 190, 1) 0%, rgba(0, 182, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.small-number {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(188, 221, 242, 1);
}
.t-big-number {
  font-size: 28px;
  font-family: Myfont;
  font-weight: bold;
  text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(60, 181, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.small-number {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(188, 221, 242, 1);
  margin-left: 6px;
}
.number-box {
  display: flex;
  align-items: center;
}
</style>
